<template>
  <border
    class="assets-distribution"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
      <div class="module-content" slot="module-content">
        <div class="module-content-li">
          <bar-line ref="barLine"
                    :title="barLineConfigLeft.title"
                    :axis="barLineConfigLeft.axis"
                    :xAxis="barLineConfigLeft.xAxis"
                    :yAxis="barLineConfigLeft.yAxis"
                    :dataZoom="barLineConfigLeft.dataZoom"
                    :grid="barLineConfigLeft.grid"
                    :config="barLineConfigLeft.config"
                    :tooltipsConfig="barLineConfigLeft.tooltipsConfig"
                    :seriesData="barLineConfigLeft.seriesData"></bar-line>
          <div class="chart-legend">
            <div class="legend" v-for="(item, index) in barLineNameLeft" :key="index">
              <div class="legend-li" v-if="index < limitLength - 1">
                <i :style="{'background': barColor[index]}"></i>
                <span>{{ item.length > 4 ? item.substring(0, 4) : item }}</span>
              </div>
              <div class="legend-li" v-if="index == limitLength - 1">
                <i :style="{'background': barColor[index]}"></i>
                <span>{{ barLineNameLeft === 5 ?item.length > 4 ? item.substring(0, 4) : item : '其他' }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="module-content-li">
          <bar-line ref="barLine1"
                    :title="barLineConfigRight.title"
                    :axis="barLineConfigRight.axis"
                    :xAxis="barLineConfigRight.xAxis"
                    :yAxis="barLineConfigRight.yAxis"
                    :dataZoom="barLineConfigRight.dataZoom"
                    :grid="barLineConfigRight.grid"
                    :config="barLineConfigRight.config"
                    :tooltipsConfig="barLineConfigRight.tooltipsConfig"
                    :seriesData="barLineConfigRight.seriesData"></bar-line>
          <div class="chart-legend">
            <div class="legend" v-for="(item, index) in barLineNameRight" :key="index">
              <div class="legend-li" v-if="index < limitLength - 1">
                <i :style="{'background': barColor[index]}"></i>
                <span>{{ item.length > 4 ? item.substring(0, 4) : item }}</span>
              </div>
              <div class="legend-li" v-if="index == limitLength - 1">
                <i :style="{'background': barColor[index]}"></i>
                <span>{{ barLineNameRight === 5 ?item.length > 4 ? item.substring(0, 4) : item : '其他' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import BarLine from './../components/BarLine.vue'
export default {
  name: 'assetsDistribution',
  components: {
    Border,
    BarLine
  },
  data () {
    return {
      borderConfig: {
        moduleType: '2x1',
        icon: '',
        titleText: '处置资产分布',
        goPageUrl: ''
      },
      barLineConfigLeft: {
        title: {
          text: '处置建筑资产（㎡）'
        },
        axis: {
          xAxisNameLength: 4,
          xAxisNameLengthSymbol: ''
        },
        dataZoom: {
          show: true,
          right: 10,
          endValue: 4
        },
        grid: {
          top: 40,
          bottom: 0
        },
        config: {
          barWidth: 20
        },
        xAxis: {
          axisLabel: {
            interval: 0
          },
          data: []
        },
        yAxis: {
        },
        tooltipsConfig: {
          tipsColor: ['#e9e703', '#e8605e', '#19dc7c', '#319ced', '#fa9022'],
          isNamePreposition: true
        },
        seriesData: []
      },
      barLineConfigRight: {
        title: {
          text: '处置土地资产（亩）'
        },
        axis: {
          xAxisNameLength: 4,
          xAxisNameLengthSymbol: ''
        },
        dataZoom: {
          show: true,
          right: 10,
          endValue: 4
        },
        grid: {
          top: 40,
          bottom: 0
        },
        config: {
          barWidth: 20
        },
        xAxis: {
          axisLabel: {
            interval: 0
          },
          data: []
        },
        yAxis: {
        },
        tooltipsConfig: {
          tipsColor: ['#e9e703', '#e8605e', '#19dc7c', '#319ced', '#fa9022'],
          isNamePreposition: true
        },
        seriesData: []
      },
      barLineNameLeft: [],
      barLineNameRight: [],
      limitLength: 5,
      barColor: ['#e9e703', '#e8605e', '#19dc7c', '#319ced', '#fa9022', '#8c70f8', '#cadfea', '#f59233'],
      apiData: '',
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.stockAssetsApi.getAssetsDisposalDistributionList({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            this.apiData = res.data.data
            this.barLineConfigLeft.title.text = res.data.data.buildAssetVolumeUnit ? `处置建筑资产（${res.data.data.buildAssetVolumeUnit})` : '处置建筑资产（㎡）'
            this.barLineConfigRight.title.text = res.data.data.landAssetVolumeUnit ? `处置土地资产（${res.data.data.landAssetVolumeUnit})` : '处置土地资产（亩）'
          } else {
            this.apiData = {}
            this.showTips('请求失败，点击确认继续刷新')
          }
          if (!isRefresh) {
            this.handleData()
          }
        }, res => {
          this.apiData = {}
          this.showTips('请求失败，点击确认继续刷新')
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.apiData
      let dataZoomLength = window.screen.width > 1890 ? 6 : 4
      this.barLineConfigLeft.dataZoom.endValue = dataZoomLength
      this.barLineConfigRight.dataZoom.endValue = dataZoomLength
      let barLineNameLeft = []
      let barLineNameRight = []
      let barLeftData = []
      let barLeftXData = []
      let barRightData = []
      let barRightXData = []
      data.buildAssetDisposalModeList.forEach((item, index) => {
        barLineNameLeft.push(item.assetDisposalModeName)
        barLeftData.push([])
        item.mangerOrgList.forEach((dataItem) => {
          barLeftData[index].push(parseInt(dataItem.assetVolume))
          if (index === 0) {
            barLeftXData.push(dataItem.mangerOrgName)
          }
        })
      })
      data.landAssetDisposalModeList.forEach((item, index) => {
        barLineNameRight.push(item.assetDisposalModeName)
        barRightData.push([])
        item.mangerOrgList.forEach((dataItem) => {
          barRightData[index].push(parseInt(dataItem.assetVolume))
          if (index === 0) {
            barRightXData.push(dataItem.mangerOrgName)
          }
        })
      })
      if (barLineNameLeft.length > 5) {
        barLineNameLeft.splice(4)
        barLineNameLeft.push('其他')
        let data = barLeftData.splice(4)
        let dataArr = []
        data.forEach((item, index) => {
          item.forEach((itemItem, itemIndex) => {
            if (dataArr[itemIndex] === undefined) {
              dataArr.push(parseInt(itemItem))
            } else {
              dataArr[itemIndex] += parseInt(itemItem)
            }
          })
        })
        barLeftData.push(dataArr)
      }
      if (barLineNameRight.length > 5) {
        barLineNameRight.splice(4)
        barLineNameRight.push('其他')
        let data = barRightData.splice(4)
        let dataArr = []
        data.forEach((item, index) => {
          item.forEach((itemItem, itemIndex) => {
            if (dataArr[itemIndex] === undefined) {
              dataArr.push(parseInt(itemItem))
            } else {
              dataArr[itemIndex] += parseInt(itemItem)
            }
          })
        })
        barRightData.push(dataArr)
      }
      let leftAccount = []
      let rightAccount = []
      barLeftData.forEach((item, index) => {
        item.forEach((itemItem, itemIndex) => {
          if (index === 0) {
            leftAccount.push(itemItem)
          } else {
            leftAccount[itemIndex] = parseInt(leftAccount[itemIndex] + itemItem)
          }
        })
      })
      barRightData.forEach((item, index) => {
        item.forEach((itemItem, itemIndex) => {
          if (index === 0) {
            rightAccount.push(itemItem)
          } else {
            rightAccount[itemIndex] = parseInt(rightAccount[itemIndex] + itemItem)
          }
        })
      })
      leftAccount.sort(function (a, b) {
        return b - a
      })
      rightAccount.sort(function (a, b) {
        return b - a
      })
      this.barLineConfigLeft.yAxis.max = leftAccount[0]
      this.barLineConfigRight.yAxis.max = rightAccount[0]
      this.barLineNameLeft = [...barLineNameLeft]
      this.barLineNameRight = [...barLineNameRight]
      if (barLeftXData.length > dataZoomLength) {
        this.barLineConfigLeft.dataZoom.show = true
      } else {
        this.barLineConfigLeft.dataZoom.show = false
      }
      if (barRightXData.length > dataZoomLength) {
        this.barLineConfigRight.dataZoom.show = true
      } else {
        this.barLineConfigRight.dataZoom.show = false
      }
      this.barLineConfigLeft.xAxis.data = barLeftXData
      this.barLineConfigRight.xAxis.data = barRightXData
      let leftSeriesData = []
      let rightSeriesData = []
      barLineNameLeft.forEach((item, index) => {
        leftSeriesData.push({
          data: barLeftData[index],
          name: item,
          stack: 'left',
          barColor: this.barColor[index],
          isBar: true
        })
      })
      barLineNameRight.forEach((item, index) => {
        rightSeriesData.push({
          data: barRightData[index],
          name: item,
          stack: 'left',
          barColor: this.barColor[index],
          isBar: true
        })
      })
      if (barLineNameLeft.length === 0) {
        leftSeriesData = [
          {
            data: [],
            name: '',
            stack: 'left',
            barColor: [],
            isBar: true
          }
        ]
      }
      if (barLineNameRight.length === 0) {
        rightSeriesData = [
          {
            data: [],
            name: '',
            stack: 'left',
            barColor: [],
            isBar: true
          }
        ]
      }
      this.barLineConfigLeft.seriesData = leftSeriesData
      this.barLineConfigRight.seriesData = rightSeriesData
    },
    resizeChart () {
      this.$refs.barLine.resizeChart()
      this.$refs.barLine1.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.assetsDistributionTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.assetsDistributionTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.assetsDistributionTimer)
  }
}
</script>
<style lang="scss" scoped>
.assets-distribution {
  .module-content {
    width: 100%;
    height: 100%;
    .module-content-li {
      width: 50%;
      height: 100%;
      float: left;
      .bar-line {
        width: 100%;
        height: calc(100% - 70px);
        padding: 10px 0 0;
      }
      .chart-legend {
        width: 100%;
        height: 50px;
        text-align: center;
        padding: 5px 10px;
        box-sizing: border-box;
        .legend {
          display: inline-block;
          margin: 0 25px 0 0;
          font-size: 14px;
          height: 22px;
          line-height: 22px;
          color: #A4B3C7;
        }
        .legend-li {
          height: 100%;
          i {
            display: block;
            float: left;
            width: 12px;
            height: 12px;
            vertical-align: top;
            margin: 5px 5px 0 0;
          }
          span {
            display: inline-block;
          }
        }

      }
    }
  }
}
</style>
